使用 aspect |
您所在的位置:网站首页 › aspect ratios参数控制 › 使用 aspect |
随着 5G 的普及,还有网速的提升,越来越多的网站使用大量的图片和视频来展示内容,对于一个响应式的网站,在缩放的时候,保持图片和视频的纵横比的需求就很常见了。传统的 CSS 只能通过宽高自己计算纵横比,或者保持原始纵横比,但是随着 CSS 的更新,我们可以使用 aspect-ratio 属性来设置固定的纵横比了。 aspect-ratioCSS aspect-ratio 属性接收以 “/” 分隔的两个数字作为属性值,分别代表宽度和高度的比例,例如 16 / 9 表示 16:9 的纵横比: aspect-ratio: 16 / 9;“/” 和后面的高度比可以省略,默认为 1, 例如设置 aspect-ratio: 4,那么就是设置了 4:1: aspect-ratio: 4;aspect-ratio 属性值也可以设置为 auto,相当于是默认值,这样对于图片、视频这样有原始纵横比的,就会保持原始比例: aspect-ratio: auto;aspect-ratio 不仅可以用在 img 或 video 标签上,任何一个具有宽高的元素都可以使用它,在缩放的时候,保持一定的纵横比: div.card { aspect-ratio: 16 / 9; } |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |